<template>
    <div class="silder-right">
        <div id="listRightTip" ref="listRightTip" class="list-right">
            <div class="list-heard">
                <!-- 插槽 标题参数 -->
                <slot name="rtitle"></slot>
            </div>
            <div class="list-right-div">
                <el-input
                    class="right-input"
                    :placeholder="rightPlace"
                    :value="rightInput"
                    @input="onchaninput"
                    @keyup.enter.native="onKeyup"
                    size="mini"
                >
                    <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="onKeyup" v-show="showQueryIcon"></i>
                </el-input>
                <slot name="button" class="right-solt-but"></slot>
            </div>
            <!-- 内容插槽 -->
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Model, Emit, Vue } from 'vue-property-decorator';

@Component({
    name: 'RiskRightModule',
})
export default class RiskRightModule extends Vue {
    // 输入框提示
    @Prop({ default: '请输入' }) rightPlace!: string;

    // 定义输入框传值
    @Model('changeUserName', { type: String })
    rightInput!: string;

    // 高度
    @Prop() rightHeight!: string;

    // 宽度
    @Prop() rightWidth!: string;

    // 是否展示搜索键
    @Prop({ default: false }) showQueryIcon: boolean;

    // 输入框的值
    @Emit('changeUserName')
    onchaninput(e: any) {
        // this.filterNode(e);
    }

    // 回车事件
    @Emit('on-keyup')
    onKeyup(e: any) {}

    private tipLeft: any;

    // 拖拽方法
    private listTip(e) {
        let dragBtn = this.$refs.listTip as any;
        // 鼠标的X轴坐标
        let clientX = e.clientX;
        let offsetLeft;
        // 拖动块距离屏幕左侧的偏移量
        if (this.tipLeft) {
            offsetLeft = this.tipLeft;
        } else {
            offsetLeft = dragBtn.offsetLeft;
        }

        let that = this;
        // 鼠标移动
        document.onmousemove = function(e) {
            let curDist = offsetLeft + (e.clientX - clientX); // 拖动块的移动距离
            let maxDist = 580;

            // 边界值处理
            curDist < 0 && (curDist = 0);
            curDist > maxDist && (curDist = maxDist);

            // 设置值（保证拖动块一直在拖动盒子的相对位置）
            dragBtn.style.right = `calc(100vw - 220px - ${curDist}px)`;
            (that.$refs.listRightTip as any).style.width = `calc(100vw - 220px - ${curDist}px)`;
            (that.$refs.listRightTip as any).style.left = 220 + curDist + 'px';
            that.tipLeft = curDist;
            return false;
        };

        // 鼠标松开
        document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmouseup = null;
            // 释放鼠标
            dragBtn.releaseCapture && dragBtn.releaseCapture();
        };
        // 捕获鼠标
        dragBtn.setCapture && dragBtn.setCapture();
        return false;
    }
}
</script>
<style lang="scss" scoped>
.list-right {
    height: 100%;
    border: 1px solid #cacaca;
    // position: absolute;
    top: 0;
    left: 220px;
    width: 100%;

    .list-heard {
        width: 100%;
        height: 34px;
        background: #e5e8eb;
        border: 1px solid #cacaca;
        padding-left: 10px;
        line-height: 34px;
        color: #222;
    }

    .list-right-div {
        border: 1px solid #cacaca;
        padding: 4px 10px;
        width: 100%;

        .right-input {
            width: 220px;
            margin-right: 20px;
        }

        .right-solt-but {
            margin-left: 10px;
        }
    }
}
</style>
